media查询引入方式

媒体查询有两种引入方法

link元素中的CSS媒体查询

					
                        <、   link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
                    
				

css样式表中媒体查询

					
                        @media (max-width: 600px) {
                        .facet_sidebar {
                        display: none;
                        }
                        }
                    
				

第一种方法是css2媒体查询用法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

逻辑操作符

一个基本的媒体查询，即一个媒体属性与默认指定的 all媒体类型

					
                        @media (min-width: 700px) { ... }
                    
				

and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型,只有当每个属性都为真时，结果才为真

					
                        @media and (max-width:600px) and (min-width: 800px;){......}
                    
				

媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

					
                        @media (min-width: 700px), handheld and (orientation: landscape) { ... }
                    
				

not键字应用于整个媒体查询，在媒体查询为假时返回真,not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。

					
                        @media not all (max-width:700px){......}
                    
				

媒体属性

• width:浏览器可视宽度
• height:浏览器可视高度
• device-width:设备屏幕的宽度
• device-height:设备屏幕的高度
• orientation:检测设备目前处于横向还是纵向状态
• aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

• device-aspect-ratio:检测设备的宽度和高度的比例
• color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
• color-index:检查设备颜色索引表中的颜色，他的值不能是负数
• monochrome:检测单色楨缓冲区域中的每个像素的位数。
• resolution:检测屏幕或打印机的分辨率
• grid：检测输出的设备是网格的还是位图设备。